<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>品牌商</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="../css/aui-indexed-list.css"/>
    <link rel="stylesheet" type="text/css" href="../css/mui.min.css"/>
    <style>
        body {
            background-color: #f3f3f3;
            font-size: 13px;
        }

        .aui-indexed-list-bar {
            top: 65px;
        }

        /*实力商家*/

        .w20 {
            width: 20%;
        }

        .zfTitle {
            padding: 8px 10px;
        }
        .aui-searchbar-wrap.fixed {
            /* top: 45px; */
            position: static;
            background: #fff;
        }
        .aui-searchbar{
            margin:0;
        }
        #aui-searchbar-input{
            height: 32px;
        }
        .aui-searchbar-wrap.fixed,.aui-searchbar{
            height: 32px;
        }
        .aui-indexed-list{
            top:0;
        }
        .icon-left-coler {
            padding-left: 10px;
        }
        .aui-title{
            line-height: 45px;
            height: 45px;
            background: #fff;
            margin: 0;
            font-size: 16px;
        }
        .icon-left-coler{
            z-index: 99;
            height: 45px;
            line-height: 45px;
            position: absolute;
        }
        .shili .aui-list-view.aui-grid-view .aui-list-view-cell .aui-img-body {
            padding: 18px 0;
        }

        .shili .aui-list-view.aui-grid-view {
            padding-bottom: 5px;
        }

        .shili .aui-list-view-cell {
            float: left;
        }

        /*列表*/
        .aui-indexed-list-view li.aui-list-view-cell img {
            width: 40px;
            height: 40px;
            line-height: 40px;
            margin-right: 8px;
            vertical-align: middle;
        }

        .aui-list-view-cell {
            padding: 6px 15px;
        }
    </style>
</head>
<body>

<header class=" aui-bar-nav ">
    <div class="aui-pull-left aui-iconfont aui-icon-left icon-left-coler" tapmode onclick="closeWin()"></div>
    <div class="aui-title aui-border-b">
        品牌商
    </div>

    <div class="aui-searchbar-wrap fixed" id="group-search">
        <div class="aui-searchbar aui-border-radius aui-border-b">
            <i class="aui-iconfont aui-icon-search"></i>
            <div class="aui-searchbar-text">输入首字母</div>
            <div class="aui-searchbar-input">
                <form action="javascript:search();">
                    <input type="text" placeholder="输入首字母" id="aui-searchbar-input">
                </form>
            </div>
            <i class="aui-iconfont aui-icon-roundclosefill" id="aui-searchbar-clear"></i>
        </div>
        <div class="aui-searchbar-cancel aui-text-info" id="aui-searchbar-cancel">取消</div>
    </div>
</header>
<div class="aui-indexed-list">
    <div class="shili bgWhite">
        <div class="zfTitle  aui-border-b">热门推荐</div>
        <ul class="aui-list-view aui-grid-view" id="recommend-content">
            <li class="aui-list-view-cell aui-img w20">
                <img class="aui-img-object" src="../image/shili.jpg">

            </li>
            <li class="aui-list-view-cell aui-img w20">
                <img class="aui-img-object" src="../image/shili.jpg">

            </li>
            <li class="aui-list-view-cell aui-img w20">
                <img class="aui-img-object" src="../image/shili.jpg">

            </li>
            <li class="aui-list-view-cell aui-img w20">
                <img class="aui-img-object" src="../image/shili.jpg">

            </li>
            <li class="aui-list-view-cell aui-img w20">
                <img class="aui-img-object" src="../image/shili.jpg">

            </li>
            <li class="aui-list-view-cell aui-img w20">
                <img class="aui-img-object" src="../image/shili.jpg">

            </li>
            <li class="aui-list-view-cell aui-img w20">
                <img class="aui-img-object" src="../image/shili.jpg">

            </li>
            <li class="aui-list-view-cell aui-img w20">
                <img class="aui-img-object" src="../image/shili.jpg">

            </li>
            <li class="aui-list-view-cell aui-img w20">
                <img class="aui-img-object" src="../image/shili.jpg">

            </li>
        </ul>
    </div>
    <ul class="aui-list-view aui-indexed-list-view aui-in" data-group="*" id="Brand-content">




        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-B" data-group="B">B</li>

        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-C" data-group="C">C</li>

        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>
        <li class="aui-list-view-cell aui-indexed-list-view-group" id="group-D" data-group="D">D</li>

        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">张三
        </li>
        <li class="aui-list-view-cell">
            <img class="aui-img-object" src="../image/shili.jpg">李四
        </li>

    </ul>
</div>
<div class="aui-indexed-list-toast"></div>
<div class="aui-indexed-list-bar">
    <a>
        <i class="aui-iconfont aui-icon-search" data-value="search"></i>
    </a>
    <a>
        <i class="aui-iconfont aui-icon-favorfill" data-value="*"></i>
    </a>
    <a data-value="A">A</a>
    <a data-value="B">B</a>
    <a data-value="C">C</a>
    <a data-value="D">D</a>
    <a data-value="E">E</a>
    <a data-value="F">F</a>
    <a data-value="G">G</a>
    <a data-value="H">H</a>
    <a data-value="I">I</a>
    <a data-value="J">J</a>
    <a data-value="K">K</a>
    <a data-value="L">L</a>
    <a data-value="M">M</a>
    <a data-value="N">N</a>
    <a data-value="O">O</a>
    <a data-value="P">P</a>
    <a data-value="Q">Q</a>
    <a data-value="R">R</a>
    <a data-value="S">S</a>
    <a data-value="T">T</a>
    <a data-value="U">U</a>
    <a data-value="V">V</a>
    <a data-value="W">W</a>
    <a data-value="X">X</a>
    <a data-value="Y">Y</a>
    <a data-value="Z">Z</a>
    <a data-value="#">#</a>
</div>

</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="../script/mui.js"></script>
<script type="text/javascript" src="../script/aui-tap.js"></script>
<script type="text/javascript" src="../script/aui-indexed-list.js"></script>
<script type="text/javascript">
    apiready = function () {

    }
    function getHeight() {
        return $(".shili").height();
    }
    var indexedList = new auiIndexedList(getHeight());
</script>
</html>